import { useReactFlow } from "@xyflow/react";
import "./index.css";
export default function SwitchNode({ id, data }) {
  const { updateNodeData } = useReactFlow();
  const handleMouseDown = () => {
    updateNodeData(id, () => {
      return { status: "off" };
    });
  };
  const handleMouseLeave = () => {
    updateNodeData(id, () => {
      return { status: "on" };
    });
  };

  return (
    <div className="switch-node" onMouseLeave={handleMouseLeave}>
      <div className={data.status == "off" ? "hidden" : ""}>
        <div id="buttonFor" onMouseDown={handleMouseDown} className="nodrag">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            width="101.5px"
            height="100.5px"
          >
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(205, 205, 205)"
              d="M85.781,78.280 C85.781,88.564 69.985,96.901 50.499,96.901 C31.13,96.901 15.217,88.564 15.217,78.280 C15.217,78.279 15.218,78.278 15.218,78.277 L15.218,55.739 L85.781,55.739 L85.781,78.280 L85.781,78.280 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(236, 236, 236)"
              d="M50.499,38.98 C69.985,38.98 85.781,46.434 85.781,56.718 C85.781,67.3 69.985,75.340 50.499,75.340 C31.13,75.340 15.217,67.3 15.217,56.718 C15.217,46.434 31.13,38.98 50.499,38.98 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(205, 205, 205)"
              d="M68.957,56.148 C68.957,61.528 60.693,65.889 50.499,65.889 C40.305,65.889 32.41,61.528 32.41,56.148 C32.41,56.146 32.42,56.145 32.42,56.143 L32.42,44.356 L68.957,44.356 L68.957,56.148 L68.957,56.148 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(220, 87, 87)"
              d="M86.499,34.499 L86.499,34.499 C86.499,44.993 70.381,53.499 50.499,53.499 C30.617,53.499 14.499,44.993 14.499,34.499 C14.499,34.497 14.499,34.496 14.499,34.494 L14.499,22.499 L22.598,22.499 C29.199,18.229 39.242,15.499 50.499,15.499 C61.756,15.499 71.799,18.229 78.400,22.499 L86.499,22.499 L86.499,34.499 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(255, 93, 93)"
              d="M50.499,1.499 C70.381,1.499 86.499,10.6 86.499,20.499 C86.499,30.992 70.381,39.499 50.499,39.499 C30.617,39.499 14.499,30.992 14.499,20.499 C14.499,10.6 30.617,1.499 50.499,1.499 Z"
            />
          </svg>
        </div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          width="101.5px"
          height="132.5px"
        >
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(189, 219, 255)"
            d="M79.499,129.499 L21.499,129.499 C20.395,129.499 19.499,128.604 19.499,127.499 C19.499,126.395 20.395,125.499 21.499,125.499 L48.499,125.499 L48.499,72.499 C48.499,71.395 49.395,70.499 50.499,70.499 C51.604,70.499 52.499,71.395 52.499,72.499 L52.499,125.499 L79.499,125.499 C80.604,125.499 81.499,126.395 81.499,127.499 C81.499,128.604 80.604,129.499 79.499,129.499 Z"
          ></path>
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          width="101.5px"
          height="183.5px"
        >
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(81, 81, 81)"
            d="M5.499,60.499 L95.499,60.499 C98.261,60.499 100.499,62.738 100.499,65.499 L100.499,135.499 C100.499,138.261 98.261,140.499 95.499,140.499 L5.499,140.499 C2.738,140.499 0.499,138.261 0.499,135.499 L0.499,65.499 C0.499,62.738 2.738,60.499 5.499,60.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(56, 56, 56)"
            d="M5.499,102.499 L95.499,102.499 C98.261,102.499 100.499,104.738 100.499,107.499 L100.499,177.499 C100.499,180.261 98.261,182.499 95.499,182.499 L5.499,182.499 C2.738,182.499 0.499,180.261 0.499,177.499 L0.499,107.499 C0.499,104.738 2.738,102.499 5.499,102.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(255, 93, 93)"
            d="M11.499,108.499 C17.22,108.499 21.499,112.976 21.499,118.499 C21.499,124.22 17.22,128.499 11.499,128.499 C5.976,128.499 1.499,124.22 1.499,118.499 C1.499,112.976 5.976,108.499 11.499,108.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M11.499,114.499 C13.708,114.499 15.499,116.290 15.499,118.499 C15.499,120.708 13.708,122.499 11.499,122.499 C9.290,122.499 7.499,120.708 7.499,118.499 C7.499,116.290 9.290,114.499 11.499,114.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(255, 93, 93)"
            d="M89.499,108.499 C95.22,108.499 99.499,112.976 99.499,118.499 C99.499,124.22 95.22,128.499 89.499,128.499 C83.976,128.499 79.499,124.22 79.499,118.499 C79.499,112.976 83.976,108.499 89.499,108.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M89.499,114.499 C91.708,114.499 93.499,116.290 93.499,118.499 C93.499,120.708 91.708,122.499 89.499,122.499 C87.290,122.499 85.499,120.708 85.499,118.499 C85.499,116.290 87.290,114.499 89.499,114.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(124, 227, 153)"
            d="M11.499,156.499 C17.22,156.499 21.499,160.976 21.499,166.499 C21.499,172.22 17.22,176.499 11.499,176.499 C5.976,176.499 1.499,172.22 1.499,166.499 C1.499,160.976 5.976,156.499 11.499,156.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M11.499,162.499 C13.708,162.499 15.499,164.290 15.499,166.499 C15.499,168.708 13.708,170.499 11.499,170.499 C9.290,170.499 7.499,168.708 7.499,166.499 C7.499,164.290 9.290,162.499 11.499,162.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(124, 227, 153)"
            d="M89.499,156.499 C95.22,156.499 99.499,160.976 99.499,166.499 C99.499,172.22 95.22,176.499 89.499,176.499 C83.976,176.499 79.499,172.22 79.499,166.499 C79.499,160.976 83.976,156.499 89.499,156.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M89.499,162.499 C91.708,162.499 93.499,164.290 93.499,166.499 C93.499,168.708 91.708,170.499 89.499,170.499 C87.290,170.499 85.499,168.708 85.499,166.499 C85.499,164.290 87.290,162.499 89.499,162.499 Z"
          />
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="32.5px"
            y="148.094px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#22797;&#32;&#32;&#21512;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="23.5px"
            y="124.5px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#49;&#49;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="61.5px"
            y="124.5px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#49;&#50;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="22.5px"
            y="172.297px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#50;&#51;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="60.5px"
            y="172.5px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#50;&#52;
            </tspan>
          </text>
        </svg>
      </div>
      <div className={data.status == "on" ? "hidden" : ""}>
        <div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            width="101.5px"
            height="100.5px"
          >
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(205, 205, 205)"
              d="M85.781,56.280 C85.781,66.564 69.984,74.901 50.499,74.901 C31.13,74.901 15.217,66.564 15.217,56.280 C15.217,56.278 15.218,56.276 15.218,56.275 L15.218,33.739 L85.781,33.739 L85.781,56.280 L85.781,56.280 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(236, 236, 236)"
              d="M50.499,16.98 C69.985,16.98 85.781,24.434 85.781,34.718 C85.781,45.3 69.985,53.340 50.499,53.340 C31.13,53.340 15.217,45.3 15.217,34.718 C15.217,24.434 31.13,16.98 50.499,16.98 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(205, 205, 205)"
              d="M68.957,34.148 C68.956,39.528 60.693,43.889 50.499,43.889 C40.305,43.889 32.41,39.528 32.41,34.148 C32.41,34.146 32.42,34.145 32.42,34.143 L32.42,22.356 L68.957,22.356 L68.957,34.148 L68.957,34.148 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(220, 87, 87)"
              d="M86.499,34.499 L86.499,34.499 C86.499,44.993 70.381,53.499 50.499,53.499 C30.617,53.499 14.499,44.993 14.499,34.499 C14.499,34.497 14.499,34.496 14.499,34.494 L14.499,22.499 L22.598,22.499 C29.199,18.229 39.242,15.499 50.499,15.499 C61.756,15.499 71.799,18.229 78.400,22.499 L86.499,22.499 L86.499,34.499 Z"
            />
            <path
              fillRule="evenodd"
              stroke="rgb(0, 0, 0)"
              strokeWidth="1px"
              strokeLinecap="butt"
              strokeLinejoin="miter"
              fill="rgb(255, 93, 93)"
              d="M50.499,1.499 C70.381,1.499 86.499,10.6 86.499,20.499 C86.499,30.992 70.381,39.499 50.499,39.499 C30.617,39.499 14.499,30.992 14.499,20.499 C14.499,10.6 30.617,1.499 50.499,1.499 Z"
            />
          </svg>
        </div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          width="101.5px"
          height="138.5px"
        >
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(189, 219, 255)"
            d="M79.499,137.499 L21.499,137.499 C20.395,137.499 19.499,136.604 19.499,135.499 C19.499,134.395 20.395,133.499 21.499,133.499 L48.499,133.499 L48.499,80.499 C48.499,79.395 49.395,78.499 50.499,78.499 C51.604,78.499 52.499,79.395 52.499,80.499 L52.499,133.499 L79.499,133.499 C80.604,133.499 81.499,134.395 81.499,135.499 C81.499,136.604 80.604,137.499 79.499,137.499 Z"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
          width="101.5px"
          height="161.5px"
        >
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(81, 81, 81)"
            d="M5.499,38.499 L95.499,38.499 C98.261,38.499 100.499,40.738 100.499,43.499 L100.499,113.499 C100.499,116.261 98.261,118.499 95.499,118.499 L5.499,118.499 C2.738,118.499 0.499,116.261 0.499,113.499 L0.499,43.499 C0.499,40.738 2.738,38.499 5.499,38.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(56, 56, 56)"
            d="M5.499,80.499 L95.499,80.499 C98.261,80.499 100.499,82.738 100.499,85.499 L100.499,155.499 C100.499,158.261 98.261,160.499 95.499,160.499 L5.499,160.499 C2.738,160.499 0.499,158.261 0.499,155.499 L0.499,85.499 C0.499,82.738 2.738,80.499 5.499,80.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(255, 93, 93)"
            d="M11.499,86.499 C17.22,86.499 21.499,90.976 21.499,96.499 C21.499,102.22 17.22,106.499 11.499,106.499 C5.976,106.499 1.499,102.22 1.499,96.499 C1.499,90.976 5.976,86.499 11.499,86.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M11.499,92.499 C13.708,92.499 15.499,94.290 15.499,96.499 C15.499,98.708 13.708,100.499 11.499,100.499 C9.290,100.499 7.499,98.708 7.499,96.499 C7.499,94.290 9.290,92.499 11.499,92.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(255, 93, 93)"
            d="M89.499,86.499 C95.22,86.499 99.499,90.976 99.499,96.499 C99.499,102.22 95.22,106.499 89.499,106.499 C83.976,106.499 79.499,102.22 79.499,96.499 C79.499,90.976 83.976,86.499 89.499,86.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M89.499,92.499 C91.708,92.499 93.499,94.290 93.499,96.499 C93.499,98.708 91.708,100.499 89.499,100.499 C87.290,100.499 85.499,98.708 85.499,96.499 C85.499,94.290 87.290,92.499 89.499,92.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(124, 227, 153)"
            d="M11.499,134.499 C17.22,134.499 21.499,138.976 21.499,144.499 C21.499,150.22 17.22,154.499 11.499,154.499 C5.976,154.499 1.499,150.22 1.499,144.499 C1.499,138.976 5.976,134.499 11.499,134.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M11.499,140.499 C13.708,140.499 15.499,142.290 15.499,144.499 C15.499,146.708 13.708,148.499 11.499,148.499 C9.290,148.499 7.499,146.708 7.499,144.499 C7.499,142.290 9.290,140.499 11.499,140.499 Z"
          />
          <path
            fillRule="evenodd"
            stroke="rgb(0, 0, 0)"
            strokeWidth="1px"
            strokeLinecap="butt"
            strokeLinejoin="miter"
            fill="rgb(124, 227, 153)"
            d="M89.499,134.499 C95.22,134.499 99.499,138.976 99.499,144.499 C99.499,150.22 95.22,154.499 89.499,154.499 C83.976,154.499 79.499,150.22 79.499,144.499 C79.499,138.976 83.976,134.499 89.499,134.499 Z"
          />
          <path
            fillRule="evenodd"
            fill="rgb(0, 0, 0)"
            d="M89.499,140.499 C91.708,140.499 93.499,142.290 93.499,144.499 C93.499,146.708 91.708,148.499 89.499,148.499 C87.290,148.499 85.499,146.708 85.499,144.499 C85.499,142.290 87.290,140.499 89.499,140.499 Z"
          />
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="32.5px"
            y="126.094px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#22797;&#32;&#32;&#21512;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="23.5px"
            y="102.5px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#49;&#49;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="61.5px"
            y="102.5px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#49;&#50;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="22.5px"
            y="150.297px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#50;&#51;
            </tspan>
          </text>
          <text
            kerning="auto"
            fontFamily="Adobe Heiti Std"
            fill="rgb(0, 0, 0)"
            fontSize="14px"
            x="60.5px"
            y="150.5px"
          >
            <tspan fontSize="14px" fontFamily="PingFang SC" fill="#FFFFFF">
              &#50;&#52;
            </tspan>
          </text>
        </svg>
      </div>
    </div>
  );
}
